<template>
	<public-view navType="other" navTitle="设置">
		<view class="content">
			<view class="info-box">
				<view class="form-item w-100 flex a-i-c j-c-b border-bottom" @click="uploadAvatar">
					<view class="title f-w-b f-s-30 color-333">
						头像
					</view>
					<view class="avatar flex a-i-c">
						<image class="image" :src="avatar" mode=""></image>
						<image class="form-next-icon" src="@/static/images/form-next.svg" mode=""></image>
					</view>
				</view>
				<view class="form-item w-100 flex a-i-c j-c-b border-bottom">
					<view class="title f-w-b f-s-30 color-333">
						用户名
					</view>
					<view class="avatar flex a-i-c">
						<input class="color-333 f-w-b f-s-30" type="text" v-model="user_name" placeholder="请输入用户名" style="text-align: right;"/>
					</view>
				</view>
				<view class="form-item w-100 flex a-i-c j-c-b">
					<view class="title f-w-b f-s-30 color-333">
						手机号码
					</view>
					<view class="avatar flex a-i-c">
						<input class="color-333 f-w-b f-s-30" v-model="mobile" :disabled="true" type="number" placeholder="请输入手机号" style="text-align: right;"/>
					</view>
				</view>
			</view>
			<bottom-btn :positon="true" @click="saveUserInfo">保存</bottom-btn>
		</view>
	</public-view>
</template>

<script>
	import {mapGetters} from "vuex"
	import bottomBtn from "@/components/myComponents/bottomBtn.vue"
	export default {
		components:{
			"bottom-btn":bottomBtn
		},
		data() {
			return {
				user_name:"",
				mobile:"",
				avatar:"",
				
			}
		},
		computed:{
			...mapGetters(["userInfo"])
		},
		onShow() {
			this.user_name = this.userInfo.nickname
			this.mobile = this.userInfo.mobile
			this.avatar = this.userInfo.avatar
		},
		methods: {
			saveUser(){
				
			},
			uploadAvatar(){
				let that = this
				that.util.uploadFile().then(res=>{
					console.log(res,"avagar")
					that.avatar = res.data.fullurl
					// that.saveUserInfo()
				})
			},
			saveUserInfo(){
				let that = this

				// 如果头像数据是base64字符串就 强制设置为空
				if(that.user_name === '' || that.avatar === ""){
					uni.showToast({
						title:"信息填写不完整",
						icon:"none"
					})
					return
				}
				that.util.postRequest({
					url:"v1/user/edit",
					data:{
						nickname:that.user_name,
						avatar:that.avatar.indexOf("data:image") !== -1?'':that.avatar
					}
				}).then(res=>{
					console.log(res)
					that.$getUser()
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.form-next-icon{
		width: 26upx;
		height: 26upx;
	}
	.info-box{
		width: 100%;
		padding: 0 30upx;
		background: #FFFFFF;
		border-radius: 20upx;
		.border-bottom{
			border-bottom: 2upx solid #ececec;
		}
		.form-item{
			padding: 36upx 0;
			.avatar{
				.image{
					width: 80upx;
					height: 80upx;
					border-radius: 50%;
					margin-right: 12upx;
				}
			}
			.title{
				
			}
		}
	}
	.content{
		width: 750upx;
		padding: 32upx 30upx;
	}
</style>
